<template>
  <div>
    <div class="topheader">
      <ul>
        <li :class="{active:isActive==1}" @click="select(1)">综合排序</li>
        <li :class="{active:isActive==2}" @click="select(2)">价格低到高</li>
        <li :class="{active:isActive==3}" @click="select(3)">价格高到低</li>
        <li>
          <input type="text" v-model="min">
        </li>
        <li>-</li>
        <li>
          <input type="text" v-model="max">
        </li>
        <li>
          <input type="button" value="确认" @click="surebt">
        </li>
      </ul>
    </div>

    <div class="allgoods">
        <ul>
          <li v-for="(item,i) in allList" :key="i" @click="detailbt(item.productId)">
            <img :src="item.productImageBig" alt="">
            {{item.productName}}
            <p>{{item.salePrice}}</p>
          <br/><br/>
          </li>
        
        </ul>
    </div>
  </div>
</template>

<script>
  //http://api.mm2018.com:8090/api/goods/allGoods?page=1&size=8&sort='1'&priceGt=''&priceLte=''
 /*  page表示页数，当前页 
      size一页显示多少条数据
      sort排序 ‘’空表示综合排序，‘1’由低到高 ‘-1’由高到低
      priceGt（起始值）/priceLte（末值） 价格筛选 ‘’空则不筛选，‘100’-‘1000’表示范围
 */
export default {
  data() {
    return {
      allList:[],
      isActive:1,
      sort:'',
      min:'',
      max:''
    }
  },
  created(){
      this.getData()
  },
  methods:{
    getData(){
      this.$axios.get(`
      http://api.mm2018.com:8090/api/goods/allGoods?page=1&size=16&sort=${this.sort}&priceGt=${this.min}&priceLte=${this.max}`)
     
      .then(res=>{
        this.allList = res.data.data
        // console.log(res.data.data)
      })
    },
    select(val){
        this.isActive=val
        if(val==1){
          this.sort=''
          this.getData()
        }
        if(val==2){
          this.sort=1
          this.getData()
        }
        if(val==3){
          this.sort=-1
          this.getData()
        }
    },
    surebt(){
      if(this.max>this.min){
          this.getData()
      }
      if(this.min>this.max){
        alert('请输入有效的范围值')
      }
    },
    detailbt(id){
        // console.log(id)
        this.$router.push({
          path:`/detail?productId=${id}`
        })
    }
  }
}
</script>

<style scoped>
  .active{
    color:blue;
  }
  .topheader{
    width:1180px;
    margin: 0 auto;
  }
  ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .topheader ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .topheader ul li{
    line-height: 60px;
  }
  .allgoods{
    width:1180px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }
  .allgoods ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* 换行 */
    flex-flow: wrap;
  }
  .allgoods ul li{
    width: 25%;
    text-align: center;
  }
  .allgoods ul li img{
    width: 150px;
    display: block;
    margin: 0 auto;
  }
  .allgoods ul li p{
    color:red;
  }
</style>